<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/commons/include/html_doctype.html"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/commons/page/codegen.jsp"%>
	
<style type="text/css">

#mermbers {
	width: 98%;
    margin: auto;
    margin-top:15px;
}

.myButton{
    BORDER: 1PX SOLID;
    PADDING: 2PX;
    BACKGROUND-COLOR: #337ab7;
    COLOR: WHITE;
    BORDER-RADIUS: 5PX;
    height: 27px;
}

.myLink{
    BORDER: 1PX SOLID;
    PADDING: 5PX;
    BACKGROUND-COLOR: #337ab7;
    COLOR: WHITE;
    BORDER-RADIUS: 5PX;
}
</style>

<body>
	<!-- 顶部按钮 -->
	<div class="wrapper wrapper-content  animated fadeInRight col-sm-12">    	
			<div class="jqGrid_wrapper" id="mermbers" >		
				<div>
				   <label class="fr-control-label"></label>
					<div class="fr-form-group">
						<input class="myButton" type = "button" value = "选择名单"  onclick="selectMember();">

						<a class="myLink" href="javascript:void(0);" onClick="downloadExcel();">模板下载</a>
						<a class="myLink" href="javascript:void(0);" onClick="fileClick()">批量导入</a>
						<input type="file" id="upfile" name="upfile" placeholder="" οnchange="importExp();" style="display: none;"/>
				
					</div>
				</div>	
				<table id="campusCardGrid" ></table>
				<div id="campusCardPager"></div>
			</div>
	</div>
	
	<script type="text/javascript">
	   var meettingid='${meetingManage.id}'; 	   
	   var ids = [];
	   var win = {};
	   //通过指定的ID重加载表格
	   function refreshGrid(ids){		   
		   $("#campusCardGrid").jqGrid('clearGridData');  //清空表格
		   $("#campusCardGrid").jqGrid('setGridParam',{
			    url:'${ctx}/rdp/user/campusCard/listByIds.htm?ids='+ids.toString()
		   }).trigger("reloadGrid");	
		   $("#members").attr("value",ids.toString());
	   }
	   //人员选择
	   var selectMember = function (){
		  var iwidth = 1000;
		  var iheight = 550;
		  var itop = (window.screen.availHeight-iheight)/2;       //获得窗口的垂直位置;
		  var ileft = (window.screen.availWidth-iwidth)/2;      //获得窗口的水平位置; 		   		   
		  win = window.open(
				"${ctx}/rdp/popup/tree.htm", 
				"人員選擇", 
				"status=no,location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,top="+itop+",left="+ileft+",width="+iwidth+",height="+iheight
		   );   
	   }
	   //彈窗回調
	   var initIds = function (addIds){
		   //合并
		   ids = ids.concat(addIds);
		   //去重
		   ids = ids.filter((item, index, self) => self.indexOf(item) ==index);		   
		   win.close();
		   refreshGrid(ids);
	   }
	   //移除
       function removeGridData(id){
    	   for (var i = 0; i < ids.length; i++) { 
    		   if (ids[i] == id) {
    			   ids.splice(i, 1); 
    			   break;
    		   }    		
    	   }
    	   refreshGrid(ids);
       }
	   //模板下載
       function downloadExcel() {    	    
      	    window.location.href="${ctx}/rdp/popup/downloadExcel";
       }
       //上传
       function fileClick(){
      	  $("#upfile").click();
       }
       
	   //初始化表单
       $(function(){
    	   gridInit();
    	   //绑定上传事件
    	   $("#upfile").change(importExp);
       });
       //上传事件
       function importExp() {
    		//var index = layer.load(1, {time: 20*1000});  // 调用加载层
    		var formData = new FormData();
    		var name = $("#upfile").val();
    		formData.append("name",name);
    		formData.append("file",$("#upfile")[0].files[0]);
    	 
    		$.ajax({
    			url : '${ctx}/rdp/popup/uploadExcel',
    			type : 'POST',
    			data : formData,
    			//ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉
    			contentType:false,
    			//取消帮我们格式化数据，是什么就是什么
    			processData:false,
    			success : function(data) {
    				//关闭 加载层
    				//layer.close(index);
    				if(data.status==true){
    				//layer.msg("导入成功");
    				   var newAddIds = data.ids;
    				   ids = ids.concat(newAddIds);
    				   ids = ids.filter((item, index, self) => self.indexOf(item) ==index);		   
    				   refreshGrid(ids);    				 
    				}else{
    				//layer.msg("导入失败");
    				}
    		    }
    		});
    	 
    		$("#upfile").val("");
    	}
       
                   
       function gridInit(){
    	   $("#campusCardGrid").GridList(
					{
						url :  '${ctx}/rdp/user/campusCard/permissionUserList.htm?meetingId=',
						pager :"#campusCardPager",
						colNames: ['ID','姓名','工号','电话','部门代码','部门名称','性别','操作'],
				        colModel: [{
		                 	   name:'id',
		                	   index: 'ID',
		                	   hidden:true,
		                	   key:true
		                	},		                	
		                	{
		                 	   name:'username',
		                	   index: 't.USERNAME'
		                	},
                            {
		                 	   name:'usernum',
		                	   index: 't.USERNUM'
		                	},	
		                	{
		                 	   name:'phone',
		                	   index: 't.PHONE'
		                	 },  
		                	 {
		                 	   name:'orgcode',
		                	   index: 't.ORGCODE',
		                	   hidden:true,
                             },   
		                	 {
			                 	   name:'orgname',
			                 	   index: 'd.ORGNAME',
			                	   sortable: false 
                             }, 
                             {
		                 	   name:'sex',
		                	   index: 'SEX',
		                	   formatter:function(cellValue, options, rowObject){
		                		   if(cellValue==1){
		                			   return '男';
		                		   }else{
		                			   return '女';
		                		   }
		                	   }
                             }, 
                             {
									name : '__manage',
									width : 30,
									sortable:false,
									//classes:'rowOps',
									//formatter : 'manage',
									//formatoptions :[{
									//	label:'删除',
									//	classes:'btn btn-primary fa fa-remove',
									//    action: ''
									//}]
									formatter:function(cellValue, options, rowObject){
										var id = options['rowId'];
										var html = "<a  href='javascript:void(0);' onclick = 'removeGridData("+id+")'>删除<a>"
										return html;

				                	}
		                	 
		                	        
							} ],

							//点击行，进行单选
					        //要求：editable:false
					        onSelectRow: function (rowId, status, e) {
					        	
					            var ids=$('#campusCardGrid').jqGrid('getGridParam','selarrrow');
								selectIds = ids;

					        },
							//点击题头的checkbox按钮，一键多选
					        onSelectAll:function(rowids,statue){
					            selectIds = rowids;
					        }						
	
					});
       }


	</script>
	
</body>
</html>